<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>项目申报管理系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #f5f5f5;
            padding: 20px;
        }
        .container {
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 20px;
            margin-bottom: 20px;
        }
        .btn-group {
            margin-bottom: 15px;
        }
        .btn {
            padding: 6px 12px;
            margin-right: 10px;
            border-radius: 4px;
            cursor: pointer;
            border: 1px solid #ddd;
            background-color: #fff;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
        }
        .btn svg {
            width: 16px;
            height: 16px;
            margin-right: 5px;
            fill: #666;
        }
        .search-box {
            display: flex;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 4px;
            overflow: hidden;
        }
        .search-input {
            flex: 1;
            padding: 8px 12px;
            border: none;
            outline: none;
            font-size: 14px;
        }
        .search-btn {
            padding: 8px 15px;
            background-color: #fff;
            border: none;
            border-left: 1px solid #ddd;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .search-btn svg {
            width: 16px;
            height: 16px;
            fill: #666;
        }
        table {
            width: 100%;
            border-collapse: collapse;
        }
        th, td {
            padding: 12px 15px;
            text-align: center;
            border-bottom: 1px solid #eee;
        }
        th {
            background-color: #f9f9f9;
            font-weight: bold;
            color: #333;
        }
        tr:hover {
            background-color: #f5f5f5;
        }
        .checkbox {
            width: 18px;
            height: 18px;
        }
        .status-submitted {
            color: #fff;
            background-color: #19be6b;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .status-not-submitted {
            color: #fff;
            background-color: #ff9900;
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 12px;
        }
        .action-link {
            color: #2d8cf0;
            text-decoration: none;
        }
        .pagination {
            display: flex;
            justify-content: flex-end;
            margin-top: 20px;
            align-items: center;
        }
        .pagination span {
            margin: 0 5px;
            font-size: 14px;
            color: #666;
        }
        .page-btn {
            padding: 5px 10px;
            margin: 0 2px;
            border: 1px solid #ddd;
            background-color: #fff;
            cursor: pointer;
            border-radius: 3px;
            font-size: 12px;
        }
        .page-btn.active {
            background-color: #2d8cf0;
            color: #fff;
            border-color: #2d8cf0;
        }
        .empty {
            color: #999;
        }
        .red-text {
            color: #ed4014;
        }
        
        /* 弹窗样式 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background-color: #fff;
            border-radius: 5px;
            width: 80%;
            max-width: 1000px;
            max-height: 90vh;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .modal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            border-bottom: 1px solid #eee;
        }
        
        .modal-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        
        .modal-close {
            cursor: pointer;
            font-size: 20px;
            color: #999;
        }
        
        .modal-body {
            padding: 20px;
            overflow-y: auto;
            flex: 1;
            display: flex;
            flex-direction: column;
        }
        
        .modal-footer {
            padding: 12px 20px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: flex-end;
        }
        
        .attachment-preview {
            flex: 1;
            min-height: 400px;
            border: 1px solid #eee;
            margin-bottom: 15px;
            overflow: auto;
        }
        
        .attachment-iframe {
            width: 100%;
            height: 500px;
            border: none;
        }
        
        .attachment-list {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-bottom: 15px;
        }
        
        .attachment-item {
            display: flex;
            align-items: center;
            padding: 8px 12px;
            border: 1px solid #eee;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .attachment-item:hover, .attachment-item.active {
            border-color: #2d8cf0;
            background-color: #f0f9ff;
        }
        
        .attachment-item svg {
            width: 18px;
            height: 18px;
            margin-right: 5px;
            fill: #ed4014;
        }
        
        .attachment-action-btns {
            display: flex;
            gap: 10px;
        }
        
        .attachment-btn {
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 14px;
            display: flex;
            align-items: center;
        }
        
        .attachment-btn svg {
            width: 16px;
            height: 16px;
            margin-right: 5px;
        }
        
        .btn-blue {
            background-color: #2d8cf0;
            color: #fff;
            border: none;
        }
        
        .btn-default {
            background-color: #fff;
            color: #666;
            border: 1px solid #ddd;
        }
        
        .btn-danger {
            background-color: #ed4014;
            color: #fff;
            border: none;
        }
        
        /* 资格评审表格样式 */
        .qualification-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }
        
        .qualification-table th, .qualification-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
        }
        
        .qualification-table th {
            background-color: #f2f2f2;
        }
        
        .add-row-btn {
            margin-bottom: 15px;
            background-color: #2d8cf0;
            color: #fff;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            display: flex;
            align-items: center;
        }
        
        .add-row-btn svg {
            width: 16px;
            height: 16px;
            margin-right: 5px;
            fill: #fff;
        }
        
        .save-btn {
            background-color: #19be6b;
            color: #fff;
            border: none;
            padding: 6px 12px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        
        .delete-row-btn {
            background-color: #ed4014;
            color: #fff;
            border: none;
            padding: 2px 6px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }
        
        /* 评分规则表格样式 */
        .scoring-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .scoring-table th, .scoring-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: center;
            vertical-align: middle;
        }
        
        .scoring-table th {
            background-color: #f2f2f2;
            font-weight: bold;
        }
        
        .scoring-table .main-row {
            background-color: #e6f7ff;
            font-weight: bold;
        }
        
        .scoring-table .editable {
            position: relative;
        }
        
        .scoring-table .editable[contenteditable="true"] {
            background-color: #fffbe6;
            outline: none;
            min-height: 20px;
        }
        
        .scoring-table .score-cell {
            width: 80px;
        }
        
        .scoring-table .criteria-cell {
            width: 30%;
        }
        
        .scoring-table .content-cell {
            width: 30%;
        }
        
        .scoring-table .standard-cell {
            width: 30%;
        }
        
        .score-options {
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
            margin-top: 5px;
        }
        
        .score-option {
            padding: 2px 8px;
            background-color: #f0f0f0;
            border-radius: 3px;
            cursor: pointer;
            font-size: 12px;
        }
        
        .score-option:hover {
            background-color: #2d8cf0;
            color: #fff;
        }
        
        .scoring-modal-content {
            width: 90%;
            max-width: 1200px;
        }
        
        .scoring-modal-body {
            max-height: 70vh;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <!-- SVG图标库 -->
    <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
        <symbol id="icon-add" viewBox="0 0 24 24">
            <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6z"/>
        </symbol>
        <symbol id="icon-edit" viewBox="0 0 24 24">
            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
        </symbol>
        <symbol id="icon-delete" viewBox="0 0 24 24">
            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
        </symbol>
        <symbol id="icon-return" viewBox="0 0 24 24">
            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
        </symbol>
        <symbol id="icon-search" viewBox="0 0 24 24">
            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
        </symbol>
        <symbol id="icon-download" viewBox="0 0 24 24">
            <path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>
        </symbol>
        <symbol id="icon-print" viewBox="0 0 24 24">
            <path d="M19 8H5c-1.66 0-3 1.34-3 3v6h4v4h12v-4h4v-6c0-1.66-1.34-3-3-3zm-3 11H8v-5h8v5zm3-7c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-1-9H6v4h12V3z"/>
        </symbol>
        <symbol id="icon-trash" viewBox="0 0 24 24">
            <path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/>
        </symbol>
        <symbol id="icon-pdf" viewBox="0 0 24 24">
            <path d="M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-8.5 7.5c0 .83-.67 1.5-1.5 1.5H9v2H7.5V7H10c.83 0 1.5.67 1.5 1.5v1zm5 2c0 .83-.67 1.5-1.5 1.5h-2.5V7H15c.83 0 1.5.67 1.5 1.5v3zm4-3H19v1h1.5V11H19v2h-1.5V7h3v1.5zM9 9.5h1v-1H9v1zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm10 5.5h1v-3h-1v3z"/>
        </symbol>
        <symbol id="icon-close" viewBox="0 0 24 24">
            <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>
        </symbol>
    </svg>

    <div class="container">
        <div class="btn-group">
            <button class="btn" id="addBtn">
                <svg><use href="#icon-add"></use></svg>
                新增
            </button>
            <button class="btn">
                <svg><use href="#icon-edit"></use></svg>
                编辑
            </button>
            <button class="btn">
                <svg><use href="#icon-delete"></use></svg>
                删除
            </button>
            <button class="btn">
                <svg><use href="#icon-return"></use></svg>
                撤回
            </button>
        </div>

        <div class="search-box">
            <input type="text" class="search-input" placeholder="项目名称/申报部门/申报人/建设日期">
            <button class="search-btn">
                <svg><use href="#icon-search"></use></svg>
            </button>
        </div>

        <table>
            <thead>
                <tr>
                    <th style="width: 40px;"><input type="checkbox" class="checkbox"></th>
                    <th>项目名称</th>
                    <th>申报部门</th>
                    <th>申报人</th>
                    <th class="red-text">建设日期</th>
                    <th>状态</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>信息化智能终端升级项目</td>
                    <td>信息技术部</td>
                    <td>张三</td>
                    <td>2022-01-14</td>
                    <td><span class="status-submitted">已提交</span></td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="1">查看</a>
                        <a href="#" class="action-link qualification-btn" data-id="1">资格评审</a>
                        <a href="#" class="action-link scoring-btn" data-id="1">评分规则</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>网络安全防护系统建设</td>
                    <td>网络安全部</td>
                    <td>李四</td>
                    <td>2022-01-14</td>
                    <td><span class="status-not-submitted">未提交</span></td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="2">查看</a>
                        <a href="#" class="action-link qualification-btn" data-id="2">资格评审</a>
                        <a href="#" class="action-link scoring-btn" data-id="2">评分规则</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>OA系统优化升级</td>
                    <td>行政管理部</td>
                    <td>王五</td>
                    <td>2020-09-21</td>
                    <td><span class="status-submitted">已提交</span></td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="3">查看</a>
                        <a href="#" class="action-link qualification-btn" data-id="3">资格评审</a>
                        <a href="#" class="action-link scoring-btn" data-id="3">评分规则</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>数据中心云迁移项目</td>
                    <td>基础设施部</td>
                    <td>赵六</td>
                    <td>2024-02-26</td>
                    <td><span class="status-not-submitted">未提交</span></td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="4">查看</a>
                        <a href="#" class="action-link qualification-btn" data-id="4">资格评审</a>
                        <a href="#" class="action-link scoring-btn" data-id="4">评分规则</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>智慧办公平台建设</td>
                    <td>信息技术部</td>
                    <td>钱七</td>
                    <td>2020-09-21</td>
                    <td><span class="status-submitted">已提交</span></td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="5">查看</a>
                        <a href="#" class="action-link qualification-btn" data-id="5">资格评审</a>
                        <a href="#" class="action-link scoring-btn" data-id="5">评分规则</a>
                    </td>
                </tr>
                <tr>
                    <td><input type="checkbox" class="checkbox"></td>
                    <td>IT基础设施更新</td>
                    <td>基础设施部</td>
                    <td>孙八</td>
                    <td>2022-01-14</td>
                    <td><span class="status-not-submitted">未提交</span></td>
                    <td>
                        <a href="#" class="action-link view-btn" data-id="6">查看</a>
                        <a href="#" class="action-link qualification-btn" data-id="6">资格评审</a>
                        <a href="#" class="action-link scoring-btn" data-id="6">评分规则</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <div class="pagination">
            <span>共 600 条</span>
            <button class="page-btn">&lt;</button>
            <button class="page-btn">50</button>
            <button class="page-btn active">51</button>
            <button class="page-btn">52</button>
            <button class="page-btn">53</button>
            <button class="page-btn">54</button>
            <button class="page-btn">...</button>
            <button class="page-btn">&gt;</button>
        </div>
    </div>

    <!-- 附件预览弹窗 -->
    <div class="modal" id="attachmentModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">项目附件</h3>
                <span class="modal-close">&times;</span>
            </div>
            <div class="modal-body">
                <div class="attachment-list" id="attachmentList">
                    <!-- 附件列表 -->
                </div>
                <div class="attachment-preview">
                    <iframe class="attachment-iframe" id="previewFrame" src=""></iframe>
                </div>
                <div class="attachment-action-btns">
                    <button class="attachment-btn btn-blue" id="downloadBtn">
                        <svg><use href="#icon-download"></use></svg>
                        下载
                    </button>
                    <button class="attachment-btn btn-default" id="printBtn">
                        <svg><use href="#icon-print"></use></svg>
                        打印
                    </button>
                    <button class="attachment-btn btn-danger" id="deleteBtn">
                        <svg><use href="#icon-trash"></use></svg>
                        删除
                    </button>
                </div>
            </div>
            <div class="modal-footer">
                <button class="btn" id="closeModal">关闭</button>
            </div>
        </div>
    </div>
    
    <!-- 资格评审弹窗 -->
    <div class="modal" id="qualificationModal">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title">资格评审</h3>
                <span class="modal-close" id="closeQualificationBtn">&times;</span>
            </div>
            <div class="modal-body">
                <button class="add-row-btn" id="addRowBtn">
                    <svg><use href="#icon-add"></use></svg>
                    添加行
                </button>
                <table class="qualification-table" id="qualificationTable">
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>资格项</th>
                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody id="qualificationTableBody">
                        <tr>
                            <td>1</td>
                            <td>营业执照</td>
                            <td></td>
                            <td><button class="delete-row-btn">删除</button></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>投标人资格声明函</td>
                            <td></td>
                            <td><button class="delete-row-btn">删除</button></td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>财务审计报告</td>
                            <td></td>
                            <td><button class="delete-row-btn">删除</button></td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>授权委托书</td>
                            <td></td>
                            <td><button class="delete-row-btn">删除</button></td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td>开标一览表</td>
                            <td></td>
                            <td><button class="delete-row-btn">删除</button></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button class="save-btn" id="saveQualificationBtn">保存</button>
                <button class="btn" id="cancelQualificationBtn">取消</button>
            </div>
        </div>
    </div>
    
    <!-- 评分规则弹窗 -->
    <div class="modal" id="scoringModal">
        <div class="modal-content scoring-modal-content">
            <div class="modal-header">
                <h3 class="modal-title">评分规则</h3>
                <span class="modal-close" id="closeScoringBtn">&times;</span>
            </div>
            <div class="modal-body scoring-modal-body">
                <button class="add-row-btn" id="addScoringRowBtn">
                    <svg><use href="#icon-add"></use></svg>
                    添加评分项
                </button>
                <table class="scoring-table" id="scoringTable">
                    <thead>
                        <tr>
                            <th class="criteria-cell">评分因素</th>
                            <th class="content-cell">评分内容</th>
                            <th class="standard-cell">评分标准</th>
                            <th class="score-cell">分值</th>
                        </tr>
                    </thead>
                    <tbody id="scoringTableBody">
                        <!-- 价格分 -->
                        <tr class="main-row">
                            <td rowspan="3" class="editable">报价 (30分)</td>
                            <td rowspan="3" class="editable">报价 (30分)</td>
                            <td class="editable">
                                价格分采用底价优先法计算，即满足招标文件要求且最低报价的投标人为基准价，其价格分为满分，其他投标人的价格分统一按照下式计算：
                            </td>
                            <td rowspan="3" class="editable score-cell">30</td>
                        </tr>
                        <tr>
                            <td class="editable">
                                报价得分=(基准价/报价)×30
                            </td>
                        </tr>
                        <tr>
                            <td class="editable">
                                此处投标报价指经过投标修正，及因落实政府采购政策进行价格调整后的投标价，评价时四舍五入保留两位小数。
                            </td>
                        </tr>
                        
                        <!-- 同类项目 -->
                        <tr class="main-row">
                            <td rowspan="2" class="editable">同类项目案例 (3分)</td>
                            <td rowspan="2" class="editable">同类项目案例 (3分)</td>
                            <td class="editable">
                                注：价格分保留两位小数，最低报价不作为中标的凭证。
                            </td>
                            <td rowspan="2" class="editable score-cell">3</td>
                        </tr>
                        <tr>
                            <td class="editable">
                                投标人具有近三年(2022年3月1日至本项目递交投标文件截止时间止，以签订日期为准)与本项目相似业绩，每提供1份得1分，最多得3分。
                            </td>
                        </tr>
                        
                        <!-- 商务部分 -->
                        <tr class="main-row">
                            <td rowspan="2" class="editable">商务部分 (11分)</td>
                            <td class="editable">投标人资质 (2分)</td>
                            <td class="editable">
                                投标人具有：ISO9001质量管理体系认证证书、ISO 27001信息安全管理体系认证证书，每所投标的标品每提供一个得1分，满分2分。
                            </td>
                            <td class="editable score-cell">2</td>
                        </tr>
                        <tr>
                            <td class="editable">知识产权 (5分)</td>
                            <td class="editable">
                                1. 基于数据分享的数据同步软件<br>
                                2. 远程复制及本地数据自动备份软件<br>
                                3. IP-SAN与iSCSI存储局域网络管理软件<br>
                                4. 云管理及灾难恢复软件<br>
                                5. 智能巡检报警软件<br>
                                每提供1个得1分，满分5分。
                            </td>
                            <td class="editable score-cell">5</td>
                        </tr>
                        
                        <!-- 技术部分 -->
                        <tr class="main-row">
                            <td rowspan="5" class="editable">技术部分 (56分)</td>
                            <td class="editable">技术响应 (37分)</td>
                            <td class="editable">
                                投标人对采购需求"一、技术需求、二、服务需求"的响应情况，全部满足要求可得满分37分，共118条指标（其中★号7项，#号19项，普通92项）<br>
                                （1）"★"代表关键性指标，不满足该指标将导致投标被拒：<br>
                                （2）"#"代表重要指标，每有一项不满足，扣1.5分，共扣28.5分；<br>
                                （3）"无标识项"则表示一般性指标，每有一项不满足，扣0.092分，共扣8.5分；
                            </td>
                            <td class="editable score-cell">37</td>
                        </tr>
                        <tr>
                            <td class="editable">整体方案 (11分)</td>
                            <td class="editable">
                                (1) 整体方案设计非常清晰，表述完整充分，满足理解采购人需求，技术方案详尽、科学、合理，落地性强，对环境、培训、售后、运维等关键点整体清晰度完整，得11分；<br>
                                (2) 整体方案设计基本清晰，表述基本充分，基本理解采购人需求，技术方案基本详尽、科学、合理，落地性较强，项目关键环节描述基本清晰，得6分；<br>
                                (3) 整体方案设计不够清晰，表述不够充分，部分理解采购人需求，技术方案不够详尽、科学、合理，落地性不够强，项目关键环节时间节点不够清晰，项目进度控制措施不够清晰，得2分；<br>
                                (4) 未提供方案，得0分；
                            </td>
                            <td class="editable score-cell">11</td>
                        </tr>
                        <tr>
                            <td class="editable">服务方案 (11分)</td>
                            <td class="editable">
                                系统迁移方案 (11分)<br>
                                全面理解招标人过程需求，提供先进的体系、工具和定制化迁移服务方案，覆盖全面的服务类型，确保高效、安全迁移，具有对迁移数据进行有效保障能力，提供全天候保障服务方案，得11分；<br>
                                具备经验的技术能力，满足多数迁移需求，服务高效且安全，客户支持良好，得6分；<br>
                                技术和服务能力一般，迁移效率和可靠性一般，安全性一般，客户服务一般，得2分；<br>
                                未提供服务，不得分。
                            </td>
                            <td class="editable score-cell">11</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button class="save-btn" id="saveScoringBtn">保存</button>
                <button class="btn" id="cancelScoringBtn">取消</button>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 获取新增按钮和所有复选框
            const addBtn = document.getElementById('addBtn');
            const checkboxes = document.querySelectorAll('tbody .checkbox');
            
            // 为新增按钮添加点击事件
            addBtn.addEventListener('click', function() {
                // 检查是否有选中的项目
                let hasSelected = false;
                checkboxes.forEach(function(checkbox) {
                    if (checkbox.checked) {
                        hasSelected = true;
                    }
                });
                
                if (hasSelected) {
                    // 如果有选中的项目，跳转到比选页面
                    window.location.href = 'comparison/ComparisonSelection.html';
                } else {
                    // 如果没有选中项目，提示用户
                    alert('请先选择已立项的项目！');
                }
            });
            
            // 附件预览功能
            const modal = document.getElementById('attachmentModal');
            const closeBtn = document.querySelector('.modal-close');
            const closeModalBtn = document.getElementById('closeModal');
            const viewBtns = document.querySelectorAll('.view-btn');
            const attachmentList = document.getElementById('attachmentList');
            const previewFrame = document.getElementById('previewFrame');
            const downloadBtn = document.getElementById('downloadBtn');
            const printBtn = document.getElementById('printBtn');
            const deleteBtn = document.getElementById('deleteBtn');
            
            // 模拟数据 - 项目附件列表
            const projectAttachments = {
                1: [
                    { id: 1, name: '01-招标须知.pdf', type: 'pdf', url: '/assets/files/招标须知.pdf' },
                    { id: 2, name: '立项申请报告.pdf', type: 'pdf', url: '/assets/files/立项申请报告.pdf' },
                    { id: 3, name: '技术方案.pdf', type: 'pdf', url: '/assets/files/技术方案.pdf' }
                ],
                2: [
                    { id: 4, name: '网络安全防护方案.pdf', type: 'pdf', url: '/assets/files/网络安全防护方案.pdf' },
                    { id: 5, name: '项目规划书.pdf', type: 'pdf', url: '/assets/files/项目规划书.pdf' }
                ],
                3: [
                    { id: 6, name: 'OA系统设计方案.pdf', type: 'pdf', url: '/assets/files/OA系统设计方案.pdf' }
                ],
                4: [
                    { id: 7, name: '云迁移方案.pdf', type: 'pdf', url: '/assets/files/云迁移方案.pdf' },
                    { id: 8, name: '预算书.pdf', type: 'pdf', url: '/assets/files/预算书.pdf' }
                ],
                5: [
                    { id: 9, name: '智慧办公平台方案.pdf', type: 'pdf', url: '/assets/files/智慧办公平台方案.pdf' }
                ],
                6: [
                    { id: 10, name: 'IT基础设施升级计划.pdf', type: 'pdf', url: '/assets/files/IT基础设施升级计划.pdf' }
                ]
            };
            
            // 打开模态框
            viewBtns.forEach(function(btn) {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const projectId = btn.getAttribute('data-id');
                    openAttachmentModal(projectId);
                });
            });
            
            // 关闭模态框
            closeBtn.addEventListener('click', function() {
                modal.style.display = 'none';
            });
            
            closeModalBtn.addEventListener('click', function() {
                modal.style.display = 'none';
            });
            
            // 点击模态框外部关闭
            window.addEventListener('click', function(e) {
                if (e.target === modal) {
                    modal.style.display = 'none';
                }
            });
            
            // 打开附件模态框并加载附件
            function openAttachmentModal(projectId) {
                // 清空附件列表
                attachmentList.innerHTML = '';
                
                // 加载该项目的附件
                const attachments = projectAttachments[projectId] || [];
                
                if (attachments.length === 0) {
                    attachmentList.innerHTML = '<div>该项目暂无附件</div>';
                    previewFrame.src = '';
                } else {
                    // 创建附件列表
                    attachments.forEach(function(attachment) {
                        const attachmentItem = document.createElement('div');
                        attachmentItem.className = 'attachment-item';
                        attachmentItem.setAttribute('data-url', attachment.url);
                        attachmentItem.setAttribute('data-id', attachment.id);
                        
                        attachmentItem.innerHTML = `
                            <svg><use href="#icon-pdf"></use></svg>
                            ${attachment.name}
                        `;
                        
                        // 点击附件预览
                        attachmentItem.addEventListener('click', function() {
                            // 移除其他附件的active状态
                            document.querySelectorAll('.attachment-item').forEach(function(item) {
                                item.classList.remove('active');
                            });
                            
                            // 添加当前附件的active状态
                            attachmentItem.classList.add('active');
                            
                            // 设置预览iframe的src
                            previewFrame.src = attachment.url;
                        });
                        
                        attachmentList.appendChild(attachmentItem);
                    });
                    
                    // 默认预览第一个附件
                    if (attachments.length > 0) {
                        const firstAttachment = attachmentList.querySelector('.attachment-item');
                        firstAttachment.classList.add('active');
                        previewFrame.src = attachments[0].url;
                    }
                }
                
                // 显示模态框
                modal.style.display = 'flex';
            }
            
            // 下载附件
            downloadBtn.addEventListener('click', function() {
                const activeAttachment = document.querySelector('.attachment-item.active');
                if (activeAttachment) {
                    const url = activeAttachment.getAttribute('data-url');
                    window.open(url, '_blank');
                }
            });
            
            // 打印附件
            printBtn.addEventListener('click', function() {
                previewFrame.contentWindow.print();
            });
            
            // 删除附件
            deleteBtn.addEventListener('click', function() {
                const activeAttachment = document.querySelector('.attachment-item.active');
                if (activeAttachment) {
                    if (confirm('确定要删除此附件吗？')) {
                        const attachmentId = activeAttachment.getAttribute('data-id');
                        // 这里应该发送AJAX请求到服务器删除附件
                        // 模拟删除成功后的UI更新
                        activeAttachment.remove();
                        
                        // 如果还有其他附件，则预览第一个
                        const firstAttachment = document.querySelector('.attachment-item');
                        if (firstAttachment) {
                            firstAttachment.classList.add('active');
                            previewFrame.src = firstAttachment.getAttribute('data-url');
                        } else {
                            previewFrame.src = '';
                            attachmentList.innerHTML = '<div>该项目暂无附件</div>';
                        }
                    }
                }
            });

            // 资格评审功能
            const qualificationModal = document.getElementById('qualificationModal');
            const qualificationBtns = document.querySelectorAll('.qualification-btn');
            const closeQualificationBtn = document.getElementById('closeQualificationBtn');
            const cancelQualificationBtn = document.getElementById('cancelQualificationBtn');
            const saveQualificationBtn = document.getElementById('saveQualificationBtn');
            const addRowBtn = document.getElementById('addRowBtn');
            const qualificationTableBody = document.getElementById('qualificationTableBody');
            
            // 打开资格评审模态框
            qualificationBtns.forEach(function(btn) {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const projectId = btn.getAttribute('data-id');
                    openQualificationModal(projectId);
                });
            });
            
            // 关闭资格评审模态框
            closeQualificationBtn.addEventListener('click', function() {
                qualificationModal.style.display = 'none';
            });
            
            cancelQualificationBtn.addEventListener('click', function() {
                qualificationModal.style.display = 'none';
            });
            
            // 点击模态框外部关闭
            window.addEventListener('click', function(e) {
                if (e.target === qualificationModal) {
                    qualificationModal.style.display = 'none';
                }
            });
            
            // 添加行
            addRowBtn.addEventListener('click', function() {
                const rowCount = qualificationTableBody.rows.length;
                const newRow = document.createElement('tr');
                
                newRow.innerHTML = `
                    <td>${rowCount + 1}</td>
                    <td contenteditable="true"></td>
                    <td contenteditable="true"></td>
                    <td><button class="delete-row-btn">删除</button></td>
                `;
                
                qualificationTableBody.appendChild(newRow);
                
                // 为新添加的删除按钮添加事件
                const deleteBtn = newRow.querySelector('.delete-row-btn');
                deleteBtn.addEventListener('click', function() {
                    deleteRow(this);
                });
            });
            
            // 删除行
            function deleteRow(btn) {
                const row = btn.closest('tr');
                row.remove();
                
                // 重新编号
                const rows = qualificationTableBody.rows;
                for (let i = 0; i < rows.length; i++) {
                    rows[i].cells[0].textContent = i + 1;
                }
            }
            
            // 为现有的删除按钮添加事件
            document.querySelectorAll('.delete-row-btn').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    deleteRow(this);
                });
            });
            
            // 保存资格评审
            saveQualificationBtn.addEventListener('click', function() {
                // 这里可以添加保存逻辑，例如发送AJAX请求到服务器
                alert('资格评审保存成功！');
                qualificationModal.style.display = 'none';
            });
            
            // 打开资格评审模态框
            function openQualificationModal(projectId) {
                // 显示模态框
                qualificationModal.style.display = 'flex';
            }
            
            // 评分规则功能
            const scoringModal = document.getElementById('scoringModal');
            const scoringBtns = document.querySelectorAll('.scoring-btn');
            const closeScoringBtn = document.getElementById('closeScoringBtn');
            const cancelScoringBtn = document.getElementById('cancelScoringBtn');
            const saveScoringBtn = document.getElementById('saveScoringBtn');
            const addScoringRowBtn = document.getElementById('addScoringRowBtn');
            const scoringTableBody = document.getElementById('scoringTableBody');
            
            // 打开评分规则模态框
            scoringBtns.forEach(function(btn) {
                btn.addEventListener('click', function(e) {
                    e.preventDefault();
                    const projectId = btn.getAttribute('data-id');
                    openScoringModal(projectId);
                });
            });
            
            // 关闭评分规则模态框
            closeScoringBtn.addEventListener('click', function() {
                scoringModal.style.display = 'none';
            });
            
            cancelScoringBtn.addEventListener('click', function() {
                scoringModal.style.display = 'none';
            });
            
            // 点击模态框外部关闭
            window.addEventListener('click', function(e) {
                if (e.target === scoringModal) {
                    scoringModal.style.display = 'none';
                }
            });
            
            // 使评分内容可编辑
            document.querySelectorAll('.scoring-table .editable').forEach(function(cell) {
                if (!cell.closest('tr').classList.contains('main-row')) {
                    cell.setAttribute('contenteditable', 'true');
                }
            });
            
            // 添加评分项
            addScoringRowBtn.addEventListener('click', function() {
                // 创建新的评分项行
                const newMainRow = document.createElement('tr');
                newMainRow.className = 'main-row';
                
                const newCriteriaCell = document.createElement('td');
                newCriteriaCell.className = 'editable';
                newCriteriaCell.setAttribute('contenteditable', 'true');
                newCriteriaCell.textContent = '新评分项';
                
                const newContentCell = document.createElement('td');
                newContentCell.className = 'editable';
                newContentCell.setAttribute('contenteditable', 'true');
                newContentCell.textContent = '评分内容';
                
                const newStandardCell = document.createElement('td');
                newStandardCell.className = 'editable';
                newStandardCell.setAttribute('contenteditable', 'true');
                newStandardCell.textContent = '评分标准';
                
                const newScoreCell = document.createElement('td');
                newScoreCell.className = 'editable score-cell';
                newScoreCell.setAttribute('contenteditable', 'true');
                newScoreCell.textContent = '0';
                
                newMainRow.appendChild(newCriteriaCell);
                newMainRow.appendChild(newContentCell);
                newMainRow.appendChild(newStandardCell);
                newMainRow.appendChild(newScoreCell);
                
                scoringTableBody.appendChild(newMainRow);
                
                // 为新添加的单元格添加事件
                setupScoreCell(newScoreCell);
            });
            
            // 设置分值单元格的特殊处理
            function setupScoreCell(cell) {
                cell.addEventListener('focus', function() {
                    // 如果是主观评分项，添加分值选项
                    if (isSubjectiveScore(cell)) {
                        const scoreOptions = document.createElement('div');
                        scoreOptions.className = 'score-options';
                        
                        // 根据评分标准中的描述添加对应的分值选项
                        const standardCell = cell.closest('tr').querySelector('td:nth-child(3)');
                        const standardText = standardCell ? standardCell.textContent.toLowerCase() : '';
                        
                        if (standardText.includes('11分')) {
                            addScoreOption(scoreOptions, '11');
                            addScoreOption(scoreOptions, '6');
                            addScoreOption(scoreOptions, '2');
                            addScoreOption(scoreOptions, '0');
                        } else if (standardText.includes('6分')) {
                            addScoreOption(scoreOptions, '6');
                            addScoreOption(scoreOptions, '3');
                            addScoreOption(scoreOptions, '1');
                            addScoreOption(scoreOptions, '0');
                        } else {
                            // 默认选项
                            addScoreOption(scoreOptions, '5');
                            addScoreOption(scoreOptions, '3');
                            addScoreOption(scoreOptions, '1');
                            addScoreOption(scoreOptions, '0');
                        }
                        
                        cell.appendChild(scoreOptions);
                    }
                });
                
                cell.addEventListener('blur', function() {
                    // 移除分值选项
                    const scoreOptions = cell.querySelector('.score-options');
                    if (scoreOptions) {
                        setTimeout(() => {
                            scoreOptions.remove();
                        }, 200);
                    }
                    
                    // 验证输入的是有效数字
                    const value = cell.textContent.trim();
                    if (value && !/^\d+(\.\d{1,2})?$/.test(value)) {
                        alert('请输入有效的分值！');
                        cell.textContent = '0';
                    }
                });
            }
            
            // 添加分值选项
            function addScoreOption(container, value) {
                const option = document.createElement('span');
                option.className = 'score-option';
                option.textContent = value;
                option.addEventListener('click', function() {
                    const cell = container.closest('.score-cell');
                    cell.textContent = value;
                });
                container.appendChild(option);
            }
            
            // 判断是否为主观评分项
            function isSubjectiveScore(cell) {
                const row = cell.closest('tr');
                const criteriaCell = row.querySelector('td:first-child');
                const criteriaText = criteriaCell ? criteriaCell.textContent.toLowerCase() : '';
                
                // 如果是价格分，则不是主观评分
                if (criteriaText.includes('报价') || criteriaText.includes('价格')) {
                    return false;
                }
                
                return true;
            }
            
            // 为所有分值单元格添加事件
            document.querySelectorAll('.scoring-table .score-cell').forEach(function(cell) {
                setupScoreCell(cell);
            });
            
            // 保存评分规则
            saveScoringBtn.addEventListener('click', function() {
                // 这里可以添加保存逻辑，例如发送AJAX请求到服务器
                alert('评分规则保存成功！');
                scoringModal.style.display = 'none';
            });
            
            // 打开评分规则模态框
            function openScoringModal(projectId) {
                // 根据项目ID加载对应的评分规则
                // 这里可以添加AJAX请求，从服务器获取该项目的评分规则
                
                // 显示模态框
                scoringModal.style.display = 'flex';
            }
        });
    </script>
</body>
</html>
